/*
 * @Description: 协议发送失败-服务繁忙
 * @Author: ziwei.ma
 * @Date: 2019-06-03 17:38:25
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-06-03 17:39:10
 */

<template>
  <div id="app">
    <div class="busy-service-warpper flex-v flex-vc">
      <img
        src="../assets/netbusy.png"
        class="busy-icon"
      >
      <span class="busy-service baseColorNoAcitve">服务繁忙</span>
      <span class="busy-tips baseColorInvalid fontsize28">预计10分钟到账，充值高峰期可能会有延迟</span>
    </div>
    <div
      class="consumer-hotline-warpper flex-h flex-hsb fontsize28"
      @click="jumpToTelephone"
    >
      <span>对此单有疑问</span>
      <div class="baseColorInvalid">
        <span>{{servicePhone}}</span>
        <span class="icon iconfont icon-rightangel"></span>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      servicePhone: window.SERVICE_TEL
    }
  },
  methods: {
    jumpToTelephone() {
      window.location.assign('tel:' + this.servicePhone)
    }
  }
}
</script>

<style scoped>
#app {
  background: #f2f5f6;
}
.busy-service-warpper {
  background: #ffffff;
  height: 620px;
}
.busy-icon {
  width: 200px;
  height: 200px;
  margin: 40px 275px 0 275px;
}
.busy-service {
  font-size: 36px;
  margin-top: 98px;
  line-height: 50px;
}
.busy-tips {
  line-height: 44px;
  margin-top: 10px;
}
.consumer-hotline-warpper {
  background: #ffffff;
  height: 90px;
  line-height: 90px;
  margin-top: 20px;
  padding: 0 30px;
}
</style>
